<script setup name="Xpbmform">
import { ref,onMounted } from "vue";
import {selectData1,saveData1,updateFun,insertFun,biaoshi ,tableRef} 
from "@/utils/InsertDeleteSelectUpdates";
import { ElMessage } from 'element-plus';

const dataSourceTableConstZuoChe = ref([]);
const dataSourceTableConstYuoChe = ref([]);
const buttonConst=ref("");
const inputValue=ref("");
const sfzyList=ref(
    { name: 'VxeSelect',options: [
    {value: '1', label: '停用' },
    { value: '0', label: '在用' },
    { value: '', label: '' } 
    ]}   
);

//左侧菜单表格，带条件
const select1=async ()=>{
    dataSourceTableConstZuoChe.value=await  selectData1('100307',{"bh":inputValue.value},"");
    dataSourceTableConstZuoChe.value=dataSourceTableConstZuoChe.value.ReContent;
    if(dataSourceTableConstZuoChe.value.length!=0 ){
        select2({row:{Key:dataSourceTableConstZuoChe.value[0].Key,Value:dataSourceTableConstZuoChe.value[0].Value}})
    }
}
//选择菜单后根据菜单类别获取右边列表的明细数据
const row1={row:{Key:'',Value:''}}
const select2=async (row )=>{
    buttonConst.value=row.row.Value;
    //把当前行的类别记录下来后面保存的时候刷新右侧的表格的时候用
    row1.row.Key=row.row.Key;
    row1.row.Value=row.row.Value;
    dataSourceTableConstYuoChe.value=await  selectData1('100101',{"bh":row.row.Key},"");
    dataSourceTableConstYuoChe.value=dataSourceTableConstYuoChe.value.ReContent;
}
const insert1=()=>{
const insertObj={
  aaa100:dataSourceTableConstYuoChe.value[0].aaa100 ,
  aaa101:dataSourceTableConstYuoChe.value[0].aaa101 ,
  aaa102:'',
  aaa103:'',
  aaa104:'1',
  aaa105:'',
  saveFlag: 1 
};
  insertFun(insertObj,'aaa103',dataSourceTableConstYuoChe.value);
}

const update1=(row ,i )=>{
    updateFun(row,i,dataSourceTableConstYuoChe.value);
}
const save1=async ()=>{
    const res=await saveData1('100102','',dataSourceTableConstYuoChe.value);
    if(res !=undefined){
        console.log(res );
        if(res.Flag==true){
            select2(row1 );
            ElMessage({
                showClose: true,
                message: '保存数据成功',
                type: 'success',
                duration:'5000',
                offset:40 
            });
        }
    }
}
const cancelEvent = (value) => {
    if(value.$event.key=='Enter'){
        select1();
    }
};





onMounted(()=>{
    select1();
     console.log(dataSourceTableConstZuoChe.value );
        
  
});
</script>

<template>
<!-- 最外层灰色内边距8px盒子 -->
<div class="main-content">
    <!-- 次外层白色内边距12px盒子 -->
    <div class="main-content-case">
        <!-- 左侧菜单盒子 -->
        <div class="main-content-left">
           <div style="height: 32px;margin-bottom: 16px;">
            <vxe-input v-model="inputValue" 
                prefix-icon="vxe-icon-search" 
                placeholder="请输入名称查询" 
                style="width: 100%;"
                @keyup="cancelEvent"
                >
            </vxe-input>
           </div>
           <div style="height: calc(100% - 48px);width: 100%;margin-bottom: 16px;">
            <vxe-table
                ref="tableRef"
                border
                height= 100%
                show-overflow
                style="width: 100%; cursor: pointer; /* 可选：使光标变为指针，表示可点击 */"
                :columnConfig="{resizable: true}"
                :row-config="{isCurrent:true,isHover:true}"
                :edit-config="{mode: 'cell',  trigger: 'click',showIcon:false}"
                :data="dataSourceTableConstZuoChe"
                :scroll-y="{enabled: true, gt: 0}"  
                @cell-click="(row) => select2(row)"   
                >
            <vxe-column type="seq" width="50"> 
            </vxe-column>
            <vxe-column field='Key'  title='码表类型'   width=130  >
            </vxe-column>
             <vxe-column field='Value'     title='码表类型名称'      width=153  >
            </vxe-column>
           
            </vxe-table> 
           </div>
        </div>  
        <!-- 右侧内容盒子 -->
        <div  class="main-content-right">
            <!--标题盒子20px -->
            <div class="main-content-right-title">
                 <div  class="div1"  >码表名称：</div><div class="div2 xpFont" >{{buttonConst}}</div> 
            </div>
            <!-- 分割灰色线盒子17px -->
            <div class="main-content-right-line"></div>
            <!-- 按钮盒子52px -->
            <div class="main-content-right-button">
                <div class="button-case">
                    <div class="button-case-box " @click="insert1()">
                    <img
                    src="../../../assets/images/add_icon.png"
                    style="width: 16px; height: 16px; margin-right: 2px"
                    alt=""
                    srcset=""
                    />
                    <div>新增</div>
                    </div>
                   
                    <div class="button-case-box"  > 
                        <img
                            src="../../../assets/images/save_icon.png"
                            style="width: 16px; height: 16px; margin-right: 2px"
                            alt=""
                            srcset=""
                            />
                        <el-popconfirm title="确认保存吗?"
                        confirm-button-text="确认"
                        cancel-button-text="取消"
                        @confirm="save1()"
                        @cancel="cancelEvent"
                        >
                        <template #reference>
                            <div>保存</div>
                        </template>
                        </el-popconfirm>   
                    </div>   
                    
                </div> 
            </div>
            
            <!-- 表格盒子 -->
            <div class="main-content-right-table"> 
                <div class="table-case">
                    <vxe-table
                    ref="tableRef"
                    border
                    :columnConfig="{resizable: true}"
                    :row-config="{isCurrent:true,isHover:true}"
                    :edit-config="{mode: 'cell',  trigger: 'click',showIcon:false}"
                    :data="dataSourceTableConstYuoChe"
                    height= auto
                    :scroll-y="{enabled: true, gt: 0}"  
                    show-overflow
                    @editActivated="(row) => update1(row,1)"   
                    @edit-closed="(row) => update1(row,2)"   
                    @cell-click="(row) => update1(row,3)"   
                >
            <vxe-column type="seq" width="60"> 
            </vxe-column>
            <vxe-column field="saveflag" title="标识" width="60">
              <template  #default="{ row }">
                <div style="color: red;"> {{biaoshi(row.saveFlag)}} </div>
              </template>
            </vxe-column>
            <vxe-column field='aaa100'   title='码表类型'   width=150  >
            </vxe-column>
            <vxe-column field='aaa101'   title='码表类型名称'  width=150   >
            </vxe-column>
            <vxe-column field='aaa102'   title='编号'      width=60   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='aaa103'   title='名称'      width=300   :edit-render="{name: 'input'}">
            </vxe-column>
            <vxe-column field='aaa104'   title='是否使用'      width=80   :edit-render=sfzyList>
            </vxe-column>
            <vxe-column field='aaa105'   title='详细描述'      width=45%   :edit-render="{name: 'input'}">
            </vxe-column>
            </vxe-table> 
            </div>  
            </div>


        </div>
        
    </div>
</div>


</template>

<style lang="scss" scoped>
 
.main-content{
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 83px);
  background: #f7f7f7;

  .main-content-case{
    width: 100%;
    height: 100%;
    background:#fff;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 4px 4px 4px 4px;
    display: flex;
    //左侧菜单盒子
    .main-content-left{
        width: 337px;
        height: 100%;
        margin-right: 12px;
        .main-content-left-button{
            height: 36px;
            width: 100% ;
            padding: 8px;
            display: flex;
            align-items: center;
            border-radius: 4px 4px 4px 4px;
            cursor: pointer; /* 这里设置为pointer，即手指形状 */
        }
    }
    //右侧内容盒子
    .main-content-right{
        width: calc(100% - 349px);
        border-left: 1px solid  #EBEBEB;
        padding-left: 12px;
       
        // 标题盒子20px
        .main-content-right-title{
            display: flex;
            padding-top:12px ;
            .div1{
                width: 70px;
                
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: #999999;
                line-height: 20px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
            .div2{
                width: 300px;
                 
            }
            
        } 
        //按钮盒子52px
        .main-content-right-button{
            height: 52px;
            width: 100%;
            .button-case{
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #333333;
                height: 100%;
                .button-case-box {
                    display: flex;
                    align-items: center;
                    margin-right: 12px;
                    cursor: pointer; /* 可选：使光标变为指针，表示可点击 */
                }
            }
        }
        //分割灰色线盒子17px
        .main-content-right-line{
            height: 1px;
            background: #EBEBEB;
            margin-top: 16px;
        }
        //表格盒子
        .main-content-right-table{
            height: calc(100% - 101px);
            width: 100%;
            
            .table-case{
                width: 100%;
                height: 100%;
            }
        }

    }
  }


}
.xpFont{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}
.xpFontText-align{
  text-align: left;
}
.xpFontColor{
    color: #333333;
}
</style>